<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书签管理器</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="sortable.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="top-bar">
            <div class="info-panel">
                <div class="datetime-container">
                    <div class="time"></div>
                    <div class="date"></div>
                    <div class="lunar-date"></div>
                </div>
            </div>
            
            <!-- 搜索框部分 -->
            <div class="search-wrapper">
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" id="searchInput" placeholder="搜索分类或书签...">
                </div>
                <!-- 搜索结果容器 -->
                <div id="searchResults" class="search-results"></div>
            </div>
            
            <div class="bookmark-actions-container">
                <button class="action-button import-button">
                    <i class="fas fa-file-import"></i> 导入书签
                </button>
                <button class="action-button export-button">
                    <i class="fas fa-file-export"></i> 导出书签
                </button>
            </div>
        </div>
        <div id="searchResults" class="search-results"></div>
        <div id="breadcrumb"></div>
        <div id="bookmarks-container" class="bookmarks-grid"></div>
    </div>
    <div id="bookmarkDialog" class="dialog-overlay">
        <div class="dialog-content">
            <h3>新增书签</h3>
            <form id="bookmarkForm">
                <div class="form-group">
                    <label for="bookmarkTitle">书签名称</label>
                    <input type="text" id="bookmarkTitle" required>
                </div>
                <div class="form-group">
                    <label for="bookmarkUrl">网址</label>
                    <input type="url" id="bookmarkUrl" required>
                </div>
                <div class="dialog-buttons">
                    <button type="button" class="cancel-button">取消</button>
                    <button type="submit" class="confirm-button">确定</button>
                </div>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
    <script src="lunar.js"></script>
</body>
</html> 